<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color_list{            
    display: flex;            
    display: -webkit-flex;        
}        
.color_list li{            
    width: 100px;            
    height: 100px;            
    list-style: none;            
    text-align: center;            
    line-height: 100px;   
         
}
.box{            
    width: 600px;            
    height: 150px;            
    background-color: #cccccc;            
    line-height: 150px;            
    text-align: center;        
}


    </style>
</head>
<body>

    <input type="text" id="input" />
    <script>
        var input = document.getElementById('input')
        function debounce(delay){
            let timer;
            return function(value) {
                clearTimeout(timer)
                timer = setTimeout(() => {
                console.log(value)
                }, delay);
            }
        }
        debounceFunc  = debounce(1000)
        input.addEventListener('keyup',function(e){
            debounceFunc(e.target.value)
        })

    </script>
    <!-- <ul class="color_list">        
        <li>red</li>        
        <li>orange</li>        
        <li>yellow</li>        
        <li>green</li>        
        <li>blue</li>        
        <li>purple</li>    
    </ul>
    <div class="box"></div>
    
    <script>
//         var a = 1;
// var obj = {
//   a: 2,
//   b: function() {
//     return this.a;
//   }
// }
// obj.b()
// obj.b.call(obj)

var color_list=document.querySelector(".color_list");            
var colors=color_list.getElementsByTagName("li");            
var box=document.querySelector(".box");            
// for(var n=0;n<colors.length;n++){                
//     colors[n].addEventListener("click",function(){                    
//         console.log(this.innerHTML)                    
//         box.innerHTML="该颜色为 "+this.innerHTML;                
//     })            
// }
function colorChange(e){                
    var e=e||window.event;//兼容性的处理         
    if(e.target.nodeName.toLowerCase()==="li"){                    
        box.innerHTML="该颜色为 "+e.target.innerHTML;                
    }                            
}            
color_list.addEventListener("click",colorChange,false)


var a = { count: 1, deep: { count: 2 } }
var b = Object.assign({}, a)
// 或者
console.log('Object.assign',b)
var b = {...a}

console.log('...',b)

var deepCopy = (obj) => {
    var ret = {}
    for (var key in obj) {
        var value = obj[key]
        ret[key] = typeof value === 'object' ? deepCopy(value) : value
    }
    return ret
}
    </script> -->

    <!-- <script>

        var person = {
            name:'1111',
            hobby:['222',['333','444'],'555']
        }

        function deepClone(obj){
            var cloneObj = new obj.constructor();
            if(obj === null) return obj //历史遗留问题判断的数据类型就是null
            if(obj instanceof Date) return new Date(obj);//时间处理
            if(obj instanceof RegExp) return new RegExp(obj);//正则
            if(typeof obj !== 'object') return obj;//如果数据类型不是对象
            for( var i in obj){
                if( obj.hasOwnProperty(i)){
                    cloneObj[i] = deepClone(obj[i])
                }
            }
            return deepClone
        }

        var person1 = deepClone(person);
        person1.name = 'xx'
        person1.hobby[0] = 'www'
        console.log(person)
        console.log(person1)
    </script> -->
</body>
</html>